<template>
  <div class="list_menu_contain">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="预报制作" name="first">
        <div class="top">
          <div class="one">
            <span>预报日期</span>
            <input type="date">
          </div>
          <div class="two">
            <span>类型</span>
            <select name="" id="">
              <option value="">全部</option>
              <option value="">全部</option>
            </select>
          </div>
          <div class="three">
            <span>起报点</span>
            <select name="" id="">
              <option value="">20</option>
              <option value="">30</option>
            </select>
          </div>
        </div>
        <div class="doc">
          <div class="doc_title">预报资料</div>
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="网格" name="first">
              <div class="pane_contain">
                <div class="time">
                  <span>最新资料</span>
                  <input type="date">
                  <select name="" id="">
                    <option value="">20</option>
                    <option value="">30</option>
                  </select>
                </div>
                <div class="container">
                  <div class="checked" v-for="c in 5">
                    <input type="checkbox">
                    <span>省台报湿度</span>
                  </div>
                </div>
                <div class="btn">
                  <div class="left_btn"><</div>
                  <div class="right_btn">></div>
                </div>
                <div class="list_btn">
                  <div class="button">
                    <img src="../../assets/images/路径 5.png" alt="" />
                    预报制作
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-tab-pane>
      <el-tab-pane label="查询">
        <div class="inquire">查询时次</div>
        <div class="inquire_contain">
          <div class="inquire_select">
            <div class="one">
              <span>预报员</span>
              <select name="" id="">
                <option value="">admin</option>
                <option value="">admin</option>
              </select>
            </div>
            <div class="two">
              <span>日期</span>
              <input type="date">
            </div>
            <div class="three">
              <span>类型</span>
              <select name="" id="">
                <option value="">1小时预报</option>
                <option value="">2小时预报</option>
              </select>
            </div>
            <div class="four">
              <span>查询点</span>
              <select name="" id="">
                <option value="">20</option>
                <option value="">30</option>
              </select>
            </div>
            <div class="five">
              <span>入库时间</span>
              <input type="datetime-local">
            </div>
          </div>
          <div class="inquire_checked">
            <div class="in_checked" v-for="c in 5">
              <input type="checkbox">
              <span>温度</span>
            </div>
          </div>
          <div class="inquire_co">
            <div class="co_checked1">
              <input type="checkbox">
              <span>显示站点名称</span>
            </div>
            <div class="co_checked2">
              <input type="checkbox">
              <span>列表显示</span>
            </div>           
            <div class="list_btn">
              <div class="button">
                <img src="../../assets/images/路径 5.png" alt="" />
                查询
              </div>
            </div>
            <div class="btn">
              <div class="left_btn"><</div>
              <div class="right_btn">></div>
            </div>
          </div>
        </div>
        <div class="data">数据订正</div>
        <div class="data_contain">
          <div class="list_btn">
              <div class="button button1">
                <img src="../../assets/images/路径 5.png" alt="" />
                雷达图
              </div>
              <div class="button button1">
                <img src="../../assets/images/路径 5.png" alt="" />
                云图
              </div>
              <div class="button">
                <img src="../../assets/images/路径 5.png" alt="" />
                数据订正
              </div>
            </div>
        </div>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "first",
    };
  },
  mounted() { },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style scoped lang="less">
.list_menu_contain {
  width: 100%;
  height: 100%;
  font-size: 12px;
}

.list_menu_contain .top {
  width: 100%;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.list_menu_contain .top .one,
.list_menu_contain .top .two,
.list_menu_contain .top .three {
  width: 180px;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.list_menu_contain .top select {
  width: 110px;
  outline: none;
}

.list_menu_contain .doc {
  width: 100%;
  padding-right: 10px;
  box-sizing: border-box;
}

.list_menu_contain .doc .pane_contain {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.list_menu_contain .doc .time {
  width: 300px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  input{
    width: 150px;
  }
  select{
    outline: none;
    width: 60px;
  }
}

.list_menu_contain .doc .container {
  width: 300px;
  height: 300px;
  border: 1px solid;
  padding: 2px 0 0 20px;
  box-sizing: border-box;
}

.list_menu_contain .doc .btn {
  width: 80px;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.list_menu_contain .doc .btn .left_btn,.list_menu_contain .doc .btn .right_btn{
  width: 30px;
  height: 20px;
  border: 1px solid;
  line-height: 20px;
  text-align: center;
  border-radius: 5px;
}
.list_menu_contain .inquire{
  margin-top: 10px;
  margin-bottom: 10px;
}
.list_menu_contain .inquire_contain{
  width: 380px;
  border: 1px solid;
  padding: 10px 20px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.list_menu_contain .inquire_contain .inquire_select{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.list_menu_contain .inquire_contain .inquire_select .one,.list_menu_contain .inquire_contain .inquire_select .two,.list_menu_contain .inquire_contain .inquire_select .three,.list_menu_contain .inquire_contain .inquire_select .four,.list_menu_contain .inquire_contain .inquire_select .five{
  width: 220px;
  display: flex;
  justify-content: space-between;
  select{
    width: 160px;
    height: 20px;
    outline: none;
    margin-bottom: 10px;
  }
  input{
    width: 156px;
    height: 20px;
    outline: none;
    margin-bottom: 10px;
  }
}
.list_menu_contain .inquire_contain .inquire_checked{
  width: 100%;
  border: 1px solid;
  height: 120px;
  margin-top: 10px;
  margin-bottom: 20px;
  padding-left: 20px;
  box-sizing: border-box;
}
.list_menu_contain .inquire_contain .inquire_co{
  width: 100%;
  border: 1px solid;
  padding: 10px 20px;
  box-sizing: border-box;
}
.list_menu_contain .inquire_contain .inquire_co .list_btn{
  margin: 10px 0 20px 0;
}
.list_menu_contain .inquire_contain .inquire_co .btn{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.list_menu_contain .inquire_contain .inquire_co .btn .left_btn,.list_menu_contain .inquire_contain .inquire_co .btn .right_btn{
  width: 50px;
  height: 20px;
  border: 1px solid;
  border-radius: 3px;
  line-height: 20px;
  text-align: center;
}
.list_menu_contain .data_contain{
  width: 380px;
  border: 1px solid;
  padding: 10px 50px;
  box-sizing: border-box;
}
.list_menu_contain .data_contain .list_btn{
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.list_menu_contain .data_contain .list_btn .button1{
  margin-right: 20px;
  margin-bottom: 30px;
}
::v-deep .list_menu_contain .el-tabs {
  width: 100%;
}

::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav {
  border: none;
}

::v-deep .el-tabs--card>.el-tabs__header {
  border: none;
  margin: 10px 0 0;
}

::v-deep .el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(2),
::v-deep .el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:last-child {
  padding: 0;
}

::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item {
  width: 75px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  padding: 0;
  border: none;
  background-size: 100% 100%;
  font-size: 12px;
  font-weight: 900;
  background-image: url(../../assets/images/组\ 5.png);
  color: #0c1f7b;
}

::v-deep.el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
  background-image: url(../../assets/images/组\ 4.png);
  color: #fff;
}

::v-deep .el-tabs__nav-prev {
  left: 370px;
  line-height: 22px;
}

::v-deep .el-tabs__nav-next {
  line-height: 22px;
}

::v-deep .el-tabs__nav-wrap.is-scrollable {
  padding: 0 20px 0 0;
}

.doc ::v-deep .el-tabs__content {
  width: 100%;
  padding-top: 30px;
  box-sizing: border-box;
  border: 2px solid #0c1f7b;
}

.list_menu_contain .list_btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 10px;
}

.list_menu_contain .list_btn .button {
  width: 100px;
  height: 30px;
  border: 1px solid #0c1f7b;
  color: #0c1f7b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  border-radius: 3px;
}

.list_menu_contain .list_btn .button img {
  width: 12px;
  height: 12px;
  margin-right: 10px;
}
</style>
